<template>
  <div class="chart-con" v-loading="loading">
    <div class="chart-box flex-8">
      <pie-bar-chart :chartData="chartDataPieBar"></pie-bar-chart>
    </div>
    <div class="chart-box flex-5">
      <pie-chart :chartData="chartData"></pie-chart>
    </div>
    <div class="chart-box flex-11 box-scroll">
      <bar-chart :chartData="chartDataBar"></bar-chart>
    </div>
  </div>
</template>
<script>
import BarChart from './BarChart.vue'
import PieBarChart from './PieBarChart.vue'
import PieChart from './PieChart'
import { getHelpPolicyStatistics } from '@api/modules/helpPolicy.js'
export default {
  name: 'ChartStatistics',
  components: {
    PieChart,
    BarChart,
    PieBarChart,
  },
  props: {},
  data() {
    return {
      loading: false,
      chartData: [],
      chartDataBar: [],
      chartDataPieBar: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getStatistics()
  },
  mounted() {},
  methods: {
    getStatistics() {
      this.loading = true
      getHelpPolicyStatistics().then(res => {
        if (res.code === 0) {
          if (res.data.scaleList) {
            this.chartData = res.data.scaleList.map(e => ({ name: e.name, value: e.number }))
            this.chartDataPieBar = res.data.releaseTimeList.map(e => ({ name: e.name, value: e.number }))
            this.chartDataBar = res.data.policyList
          }
        }
        this.loading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.chart-con {
  @include flex-x(center, space-between);
  border-bottom: 1px solid #e4eaf0;
  .chart-box {
    // flex: 1;
    margin: 10px;
    &:not(:last-child) {
      border-right: 1px dotted #3b93f7;
    }
  }
  .box-scroll {
    overflow: auto;
  }
}
</style>
